<template>
  <el-dialog
    v-model="dialogVisible"
    title="模具选择"
    width="1100"
    @close="close"
  >
    <el-form label-width="120px" :model="state.queryForm">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="模具编码">
            <el-input
              v-model="state.queryForm.moldCode"
              placeholder="请填写编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模具名称">
            <el-input
              v-model="state.queryForm.moldName"
              placeholder="模具名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模具型号/项目">
            <el-input v-model="state.queryForm.moldSpec" placeholder="项目" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="">
            <el-button type="primary" @click="queryData()">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :cell-style="{ padding: '6px' }"
      :data="state.moldList"
      highlight-current-row
      :row-style="{ fontSize: '8px', cursor: 'pointer' }"
      @row-dblclick="rowDoubleClick"
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        label="模具编码"
        min-width="150"
        prop="moldCode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="模具名称"
        min-width="150"
        prop="moldName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="模具型号"
        min-width="150"
        prop="moldName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单位"
        prop="measName"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
  </el-dialog>
</template>
<script setup>
  import { getMoldDocPageApi } from '@/api/equip/mold_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  const dialogVisible = ref(false),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
    pages: 0,
  })
  const state = reactive({
    moldList: [],
    queryForm: {},
  })
  const queryData = async () => {
    const { data } = await getMoldDocPageApi({
      ...(state.queryForm || {}),
      pkCorp,
      pageNum: paginationParams.pageNum,
      pageSize: paginationParams.pageSize,
      state: 1,
    })
    state.moldList = data.list
    paginationParams.total = data.total
    paginationParams.pages = data.pages
  }

  const rowDoubleClick = (row) => {
    dialogVisible.value = false
    _emits('selectMoldCallback', row)
  }
  const close = () => {}

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
    queryData()
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
    queryData()
  }
  const refreshData = () => {
    paginationParams.value = { pageNum: 1, pageSize: 10, total: 0, pages: 0 }
    queryData()
  }
  //#endregion pagintion 结束
  defineExpose({
    handleOpen: () => {
      dialogVisible.value = true
      // refreshData()
    },
    refreshData,
  })
  const _emits = defineEmits(['selectMoldCallback', 'cancelCallback'])
</script>
<style lang="scss" scoped></style>
